<template>
	<div>
		<div class="banner" @click="handleClickShow">
			<img class="banner-img" :src="bannerImg" />
			<div class="banner-info">
				<div class="banner-title">{{bannerTitle}}</div>
				<div class="banner-number">
					<span class="iconfont banner-icon">&#xe692;</span>
					{{gallaryImgs.length}}
				</div>
			</div>
		</div>
		<fade-animation>
			<gallary    
				:imgs="gallaryImgs" 
				v-show="showGallary"
				@close="handleClickCo"
			></gallary>
		</fade-animation>
	</div>
</template>

<script>
	import Gallary from '../../../common/gallary/Gallary.vue'
	import fadeAnimation from '../../../common/fade/FadeAnimation.vue'

	export default{
		name:'Banner',
		props:{
			bannerTitle:String,
			bannerImg:String,
			gallaryImgs:Array
		},
		data(){
			return {
				showGallary:false
			}
		},
		components:{
			Gallary,
			fadeAnimation
		},
		methods:{
			handleClickShow(){
				this.showGallary=true
			},
			handleClickCo(){
				this.showGallary=false
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.banner
		position:relative
		overflow:hidden
		height:0
		width:100%
		padding-bottom:55%
		.banner-img
			width:100%
			vertical-align:top
		.banner-info
			position:absolute
			left:0.1rem
			right:0.1rem
			bottom:0.2rem
			display:flex
			justify-content:space-between
			.banner-title
				color:#fff
				line-height:0.4rem
				font-size:0.4rem
			.banner-number
				background:rgba(0,0,0,0.8)
				width:1.2rem
				height:0.4rem
				color:#fff
				line-height:0.4rem
				text-align:center
				border-radius:0.3rem
				.banner-icon
					line-height:0.4rem
				
</style>